<template>
    <div>
        <a-modal
        :dialog-style="{ top: '20px' }"
        :title="formState.id?'编辑人员':'新增人员'"
        :visible="visible"
        @ok="handleOk"
        @cancel="handleCancel"
        :width="1065"
        >
            <!-- <template slot="footer">
                <a-button @click="handleCancel">取消</a-button>
                <a-button @click="handleOk(true)" class="blue-btn">保存</a-button>
                <a-button @click="handleOk(false)" class="blue-btn">保存并关闭</a-button>
            </template> -->
            <div class="reimbursement-addPersonnel-box" v-if="visible">
                <a-form-model
                    :id="randomId"
                    class="form-model-big-box form-model-big-box1"
                    ref="reimbursementRuleForm"
                    :model="formState"
                    :rules="rules"
                    layout="inline"
                >
                    <div class="flex-width-auto" >
                        <a-divider >基本信息</a-divider>
                    </div>
                    <a-form-model-item prop="realname">
                        <span slot="label" style="display: flex;justify-content: space-between;width: 54px;">
                            <span>姓</span>
                            <span>名</span>
                        </span>
                        <a-input
                            v-model="formState.realname"
                            placeholder="请输入姓名"
                            @blur="reimbursementBlur"
                        />
                    </a-form-model-item>
                    <!-- <a-form-model-item prop="sex">
                        <span slot="label" style="display: flex;justify-content: space-between;width: 54px;">
                            <span>性</span>
                            <span>别</span>
                        </span>
                        <compSelector
                            style="margin-top: 4px;"
                            v-model="formState.sex"
                            :defaultValue="formState.sex"
                            compType="Select"
                            dictionaryType="性别"
                            :height="32"
                            :width="180"
                        />
                    </a-form-model-item> -->
                    <a-form-model-item prop="phone" label="手机号码">
                        <a-input
                            v-model="formState.phone"
                            placeholder="请输入手机号码"
                            @blur="reimbursementBlur"
                        />
                    </a-form-model-item>
                    <a-form-model-item prop="fjcsf" label="审评身份">
                        <compSelector
                            style="margin-top: 4px;"
                            v-model="formState.fjcsf"
                            :defaultValue="formState.fjcsf"
                            compType="Select"
                            :bigFontSize="true"
                            dictionaryType="审评身份"
                            :options="[{
                                label:'组长',
                                value:'组长',
                            },{
                                label:'组员',
                                value:'组员',
                            },{
                                label:'预备审评员',
                                value:'预备审评员',
                            },{
                                label:'观察员',
                                value:'观察员',
                            }]"
                            :height="32"
                            :width="180"
                        />
                    </a-form-model-item>
                    <a-form-model-item prop="fsfzh" label="身份证号" v-if="!formState.isEide">
                        <a-input
                            style="width: 512px;"
                            v-model="formState.fsfzh"
                            placeholder="请输入身份证号"
                            @blur="reimbursementBlur"
                        />
                    </a-form-model-item>
                    <div class="flex-width-auto" v-if="!formState.isEide">
                        <a-divider >工作单位信息</a-divider>
                    </div>
                    <a-form-model-item prop="fgzdw" label="工作单位" v-if="!formState.isEide">
                        <vxe-pulldown
                            ref="fgzdwPulldownRef" destroy-on-close>
                            <template #default>
                                <a-input
                                style="width: 512px;"
                                v-model="formState.fgzdw"
                                placeholder="请选择或输入工作单位"
                                @focus="fgzdwfocusEvent"
                                @keyup="fgzdwkeyupEvent"
                                @input="fgzdwInput"
                                @blur="reimbursementBlur"
                                ></a-input>
                            </template>
                            <template #dropdown>
                                <vxe-list height="200" class="my-dropdown2" :data="gzdwList" auto-resize v-if="gzdwList.length">
                                    <template #default="{ items }">
                                        <div class="list-item2" v-for="item in items" :key="item.fdwqc" @click="fgzdwselectEvent(item)">
                                        <span>{{ item.fdwqc }}</span>
                                        </div>
                                    </template>
                                </vxe-list>
                            </template>
                        </vxe-pulldown>
                        <!-- <a-input
                            style="width: 507px;"
                            v-model="formState.fgzdw"
                            placeholder="请输入工作单位"
                        /> -->
                    </a-form-model-item>
                    <a-form-model-item prop="fgzdwbm" v-if="!formState.isEide">
                        <span slot="label" style="display: flex;justify-content: space-between;width: 54px;">
                            <span>部</span>
                            <span>门</span>
                        </span>
                        <a-input
                            v-model="formState.fgzdwbm"
                            placeholder="请输入部门"
                        />
                    </a-form-model-item>
                    <a-form-model-item prop="fgzdwdz" label="工作单位地址" v-if="!formState.isEide">
                        <a-input
                            style="width: 512px;"
                            v-model="formState.fgzdwdz"
                            placeholder="请输入工作单位地址"
                        />
                    </a-form-model-item>
                    <a-form-model-item prop="fssqy" label="所在地市" v-if="!formState.isEide">
                        <a-input
                            v-model="formState.fssqy"
                            placeholder="请输入所在地市"
                        />
                        <!-- <compSelector
                            style="margin-top: 4px;"
                            v-model="formState.fssqy"
                            :defaultValue="formState.fssqy"
                            compType="Select"
                            :bigFontSize="true"
                            dictionaryType="观察员所属地市"
                            :height="32"
                            :width="180"
                        /> -->
                    </a-form-model-item>
                    <a-form-model-item prop="fcsgz" label="从事或分管工作" v-if="!formState.isEide">
                        <a-input
                            style="width: 512px;"
                            v-model="formState.fcsgz"
                            placeholder="请输入从事或分管工作"
                        />
                    </a-form-model-item>
                    <a-form-model-item prop="fzw" v-if="!formState.isEide">
                        <span slot="label" style="display: flex;justify-content: space-between;width: 54px;">
                            <span>职</span>
                            <span>务</span>
                        </span>
                        <a-input
                            v-model="formState.fzw"
                            placeholder="请输入职务"
                        />
                    </a-form-model-item>

                    <a-form-model-item prop="fgzkssj" label="工作起止时间" v-if="!formState.isEide">
                        <div style="width: 512px;">
                            <a-month-picker placeholder="请选择开始时间" v-model="formState.fgzkssj" />
                            -
                            <span >至今</span>
                        </div>
                    </a-form-model-item>
                    <a-form-model-item prop="fcsjckssj" label="开始从事相关工作时间" v-if="!formState.isEide">
                        <a-month-picker v-model="formState.fcsjckssj" placeholder="请选择时间"/>
                    </a-form-model-item>

                    <a-form-model-item prop="fdwlx" label="单位类别" v-if="!formState.isEide">
                        <compSelector
                            :width="512"
                            style="margin-top: 4px;"
                            v-model="formState.fdwlx"
                            :defaultValue="formState.fdwlx"
                            compType="Select"
                            :bigFontSize="true"
                            dictionaryType="单位类型"
                            :height="32"
                        />
                    </a-form-model-item>
                    <a-form-model-item prop="fsfyjsry" label="是否药检所" v-if="!formState.isEide">
                        <a-radio-group
                            name="radioGroup5"
                            v-model="formState.fsfyjsry"
                        >
                            <a-radio value="否">否</a-radio>
                            <a-radio value="是">是</a-radio>
                        </a-radio-group>
                    </a-form-model-item>
                    <div class="flex-width-auto" >
                        <a-divider >银行卡信息</a-divider>
                    </div>
                    <a-form-model-item prop="fyhkh" label="银行卡号">
                        <a-input
                            style="width: 512px;"
                            v-model="formState.fyhkh"
                            placeholder="请输入银行卡号"
                            @blur="reimbursementBlur"
                        />
                    </a-form-model-item>
                    <a-form-model-item prop="fkfh" label="开户行">
                        <span slot="label" style="display: flex;justify-content: space-between;width: 54px;">
                            <span>开</span>
                            <span>户</span>
                            <span>行</span>
                        </span>
                        <compSelector
                            v-model="formState.fkfh"
                            style="margin-top: 4px;"
                            :defaultValue="formState.fkfh"
                            compType="Select"
                            :bigFontSize="true"
                            dictionaryType="四大银行"
                            :height="32"
                            @selectHandleChange="reimbursementBlur"
                        />
                    </a-form-model-item>
                    <a-form-model-item prop="fkhhszd" label="开户行所在地">
                        <a-input
                            style="width: 512px;"
                            v-model="formState.fkhhszd"
                            placeholder="请输入开户行所在地"
                            @blur="reimbursementBlur"
                        />
                    </a-form-model-item>
                    <a-form-model-item prop="fgwkh" label="公务卡号">
                        <a-input
                            style="width: 512px;"
                            v-model="formState.fgwkh"
                            placeholder="请输入银行卡号"
                        />
                    </a-form-model-item>
                    <a-form-model-item prop="fgwkkhh" label="公务卡开户行">
                        <compSelector
                            v-model="formState.fgwkkhh"
                            style="margin-top: 4px;"
                            :defaultValue="formState.fgwkkhh"
                            compType="Select"
                            :bigFontSize="true"
                            dictionaryType="四大银行"
                            :height="32"
                        />
                    </a-form-model-item>
                    <a-form-model-item prop="fgwkszd" label="公务卡所在地">
                        <a-input
                            style="width: 512px;"
                            v-model="formState.fgwkszd"
                            placeholder="请输入开户行所在地"
                        />
                    </a-form-model-item>
                    <div style="color:#f5222d;border-top: 0;padding: 5px;">
                        <span style="font-size: 18px;">注意：</span>（1）目前只能对工、农、建、中四大银行中任意一家开户的银行卡号进行报账，若提供其他开户行卡号会影响财务报账进度。
                        <br/>
                        &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;&ensp;（2）请提供本人日转账额度较大的银行卡，最好是一类卡，以免出现限额，影响财务报账进度。
                    </div>
                    <div class="flex-width-auto" >
                        <a-divider >个人签名</a-divider>
                    </div>
                    <a-form-model-item prop="signLink" label="个人签名">
                        <div style="display: flex;align-items: center;">
                            <div style="margin-right: 10px;">
                                <img style="width: 100%;" v-if="formState.signLink" :src="formState.signLink+'&'+Date.now()" mode="scaleToFill"/>
                            </div>
                            <a-upload
                                :openFileDialogOnClick="openFileDialogOnClick"
                                style="width: auto;"
                                name="avatar"
                                :show-upload-list="false"
                                :before-upload="$event=>{return false}"
                                @change="signHandleChange"
                            >
                                <a-button @click="qmClick" class="green-l-btn"> <a-icon type="upload" /> 上传 </a-button>
                            </a-upload>
                        </div>

                        <!-- <a-button v-else @click="qmClick"> <a-icon type="upload" /> 上传 </a-button> -->
                    </a-form-model-item>
                    <div style="color:#f5222d;border-top: 0;padding: 5px;">
                        注：请上传图片以及图片后缀为png、jpg、JPG和jpeg
                    </div>
                </a-form-model>
            </div>
        </a-modal>
    </div>
</template>
<script>
import compSelector from '@/components/compSelector/compSelector.vue'
import {jcylxdjcjdwList,jcyfybxdaddBxryUserInfo,jcyfybxdupdateBxrymxxx,jcylxdjcjuploadMyQm,spcyMyInfogetUserSignPhotoLink} from './service/index'
import moment from 'moment'

export default {
    components:{
        compSelector,
    },
    props:{

    },
    data(){
        return{
            moment:moment,
            formState:{},
            rules:{
                realname: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
                // sex: [{ required: true, message: '请选择性别', trigger: 'blur' }],
                phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' }],
                fsfzh: [{ required: true, message: '请输入身份证号', trigger: 'blur' }],

                fgzdw: [{ required: true, message: '请选择或输入工作单位', trigger: 'change' }],
                // fgzdwbm: [{ required: true, message: '请输入部门', trigger: 'blur' }],
                // fgzdwdz: [{ required: true, message: '请输入工作单位地址', trigger: 'blur' }],
                // fssqy: [{ required: true, message: '请选择所在地市', trigger: 'blur' }],
                // fcsgz: [{ required: true, message: '请输入从事或分管工作', trigger: 'blur' }],
                // fzw: [{ required: true, message: '请输入职务', trigger: 'blur' }],
                // fgzkssj: [{type:'object', required: true, message: '请选择开始时间', trigger: 'change' }],
                // fcsjckssj: [{ type:'object',required: true, message: '请选择时间', trigger: 'change' }],
                // fdwlx: [{ required: true, message: '请选择单位类别', trigger: 'blur' }],

                fyhkh: [{ required: true, message: '请输入银行卡号', trigger: 'blur' }],
                fkfh: [{ required: true, message: '请输入开户行', trigger: 'blur' }],
                fkhhszd: [{ required: true, message: '请输入开户行所在地', trigger: 'blur' }],
                // signLink: [{ required: true, message: '请上传个人签名', trigger: 'blur' }],
            },
            visible:false,
            randomId:'addPersonnel'+new Date().getTime(),
            gzdwList:[],
            openFileDialogOnClick:false,
            isValidate:false,
        }
    },
    watch:{

    },
    mounted(){


    },
    methods:{
        getData(row){
            this.openFileDialogOnClick = false
            if(row.id){
                this.openFileDialogOnClick = true
                this.getqmLink(row.fuserid)
            }
            row = {
                ...row,
                fsfyjsry:row.fsfyjsry?row.fsfyjsry:'否',
                fjcsf:row.fjcsf?row.fjcsf:'组员',
                fgzjssj:'至今',
                fgzkssj:row.fgzkssj?moment(row.fgzkssj):'',
                fcsjckssj:row.fcsjckssj?moment(row.fcsjckssj):'',
            }
            this.formState = row
            this.$nextTick(()=>{//表格所有标题样式
                this.getFormLabelStyle(this.randomId)
            })
            this.getGzdw('')
        },
        getqmLink(id){
            spcyMyInfogetUserSignPhotoLink({fuserid:id}).then(res=>{
                if(res.code == 200){
                    //console.log(res)
                    this.formState = {
                        ...this.formState,
                        signLink:res.result.signLink,
                    }

                }
            })
        },
        getFormLabelStyle(id){
            var parentElement = document.getElementById(id)//要不一样的id，避免不同组件加载到一样的
            var elements = parentElement.getElementsByClassName("ant-form-item");
            for (var i = 0; i < elements.length; i++) {
                let element = elements[i]
                if(element){
                    let itemLabel = elements[i].getElementsByClassName('ant-form-item-label')
                    if(itemLabel.length && itemLabel[0].getElementsByTagName('label').length){
                        //console.log(itemLabel[0].getElementsByTagName('label'))
                        itemLabel[0].getElementsByTagName('label')[0].style =
                        'width:130px;display: flex;align-items: center;justify-content: flex-end;font-weight: 600;height: 32px;font-family:simHei;'
                    }
                }
            }
        },
        getGzdw(val){//获取工作单位
            jcylxdjcjdwList({fdwqc:val}).then(res=>{
                if(res.code == 200){
                    this.gzdwList = res.result.records
                }else{
                    this.gzdwList = []
                }
            })
        },
        fgzdwfocusEvent(){
            this.$refs.fgzdwPulldownRef.showPanel()
            this.getGzdw(this.formState.fgzdw)
        },
        fgzdwkeyupEvent(){
            this.$refs.fgzdwPulldownRef.showPanel()
            this.getGzdw(this.formState.fgzdw)

        },
        fgzdwInput(){
            this.$refs.fgzdwPulldownRef.showPanel()
            this.getGzdw(this.formState.fgzdw)

        },
        fgzdwselectEvent(item){
            //console.log(item)
            this.$refs.fgzdwPulldownRef.hidePanel()
            let row = {
                ...this.formState,
                fssqy:item.fssds,
                fsfyjs:item.fsfyjs,
                fgzdwdz:item.fdwdz,
                fdwlx:item.fdwlx,
                fgzdw:item.fdwqc
            }
            this.formState = row
        },
        signHandleChange({file}){
            let that = this
            //console.log(file)
            if(!(file.name.indexOf('.png') !== -1 || file.name.indexOf('.jpg') !== -1 || file.name.indexOf('.jpeg') !== -1) || file.name.indexOf('.JPG') !== -1){
                this.$message.warning('请上传图片（.png、.jpg、JPG和.jpeg）')
                return false
            }
            const fileData = new FormData();
            fileData.append("file",file);
            fileData.append("id",that.formState.fuserid);
            jcylxdjcjuploadMyQm(fileData).then(res=>{
                if(res.code !== 200){
                    that.$message.warning('请上传图片（.png、.jpg、JPG和.jpeg）或者联系管理员!')
                }else{
                    that.$message.success('上传成功')
                    that.getqmLink(that.formState.fuserid)
                }
            })
        },
        qmClick(){
            this.handleOk(true)
        },
        handleOk(val){
            this.$refs.reimbursementRuleForm.validate(valid => {
                if (valid) {
                    let data = {
                        ...this.formState,
                        fgzkssj:this.formState.fgzkssj?moment(this.formState.fgzkssj).format('YYYY-MM'):'',
                        fcsjckssj:this.formState.fcsjckssj?moment(this.formState.fcsjckssj).format('YYYY-MM'):'',
                    }
                    if(this.formState.id){
                        jcyfybxdupdateBxrymxxx(data).then(res=>{
                            if(res.code == 200){
                                this.$message.success(res.message)
                                this.$emit('dataTableChange')
                                this.visible = val?true:false
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }else{
                        jcyfybxdaddBxryUserInfo(data).then(res=>{
                            if(res.code == 200){
                                this.formState = {
                                    ...res.result
                                }
                                this.getqmLink(res.result.fuserid)
                                this.openFileDialogOnClick = true
                                this.$message.success(res.message)
                                this.$emit('dataTableChange')
                                this.visible = val?true:false
                            }else{
                                this.$message.warning(res.message)
                            }
                        })
                    }

                } else {
                    this.isValidate = true
                    //console.log('error submit!!',valid);
                    return false;
                }
            });
        },
        reimbursementBlur(){
            if(this.isValidate){
                this.$refs.reimbursementRuleForm.validate(valid => {
                    if (valid) {
                        this.openFileDialogOnClick = true
                    }else{
                        this.openFileDialogOnClick = false
                    }
                });
            }

        },
        handleCancel(){
            this.visible = false
        }
    }
}
</script>
<style lang="less">
.reimbursement-addPersonnel-box{
    .ant-divider-inner-text{
        font-weight: 600;
        color: #72adff;
    }
    .ant-divider-horizontal.ant-divider-with-text-center::before,
    .ant-divider-horizontal.ant-divider-with-text-left::before,
    .ant-divider-horizontal.ant-divider-with-text-right::before,
    .ant-divider-horizontal.ant-divider-with-text-center::after,
    .ant-divider-horizontal.ant-divider-with-text-left::after,
    .ant-divider-horizontal.ant-divider-with-text-right::after{
        border-top:1px solid #72adff;
    }
    .ant-divider-horizontal.ant-divider-with-text-center, .ant-divider-horizontal.ant-divider-with-text-left, .ant-divider-horizontal.ant-divider-with-text-right{
        margin: 8px 0;
    }
    .ant-form-item{
        // display: flex;
        // align-items: center;
    }
    .toolbox-form-item{
        width: 50%;
        // padding: 3px;
    }
    .ant-form-item-with-help{
        margin-bottom: 10px;
    }
    .form-model-big-box{
        .form-item-flex-1{
            display: flex;
            .ant-form-item-control-wrapper{
                flex: 1;

            }
        }
        .ant-form-item-control-wrapper{
            font-family:仿宋_GB2312 !important;

            .ant-checkbox-group{
                height: 40px;
                line-height: 40px;
            }
        }
    }
    .form-model-big-box1{
        .ant-form-item-label{

            margin: 4px 3px;
            label{
                padding-left: 3px;
                // background: #f0f5ff;
                background: #e6f7ff;
            }

        }
    }
    .ant-form-inline .ant-form-item > .ant-form-item-label{
        vertical-align: middle !important;
    }
    .ant-form-item-label {
        line-height: 1;
        white-space: wrap;
    }
    .flex-width-auto{
        width: 100%;
        .ant-form-item-control-wrapper{
            flex: 1;
            margin-right: 30px;
        }
    }
}
</style>
